<template>
	<view style="background-color: #efefef;">
		<view style="background-color: #fff;">
			<view style="display: flex;justify-content: space-around;">
				<view style="width: 350rpx;">
					<u-input @click="time_btn" v-model="find.stime" border="true" type="select" placeholder='请选择开始日期' />
				</view>
				<view style="width: 350rpx;">
					<u-input @click="time_btn2" v-model="find.etime" border="true" type="select"
						placeholder='请选择结束日期' />
				</view>

			</view>
			<view style="display: flex;margin-top: 10rpx;margin-bottom: 10rpx;">
				<view style="width: 250rpx;">
					<u-input @click="reimStatus_btn" v-model="reimStatus_name" border="true" type="select"
						placeholder='报账状态' />
				</view>
				<view style="width: 250rpx;margin-bottom: 10rpx;">
					<u-input @click="operUserId_btn" v-model="operUserId_name" border="true" type="select"
						placeholder='经办人' />
				</view>
				<view style="width: 250rpx;margin-bottom: 10rpx;">
					<u-input @click="moneyTypeIds_btn" v-model="moneyTypeIds_name" border="true" type="select"
						placeholder='金额类型' />
				</view>

			</view>
			<view style="display: flex;margin-top: 10rpx;margin-bottom: 10rpx;align-items: center;">
				<view style="width: 500rpx;">
					<u-input @input="reimUser_btn" v-model="find.reimUser" border="true" type="text"
						placeholder='收款人' />
				</view>
				<view style="width: 250rpx;margin-left: 20rpx;color: red;">
					总金额:{{totalPay}}
				</view>

			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" @scroll="scroll" style="height: 80vh;width: 100%;" scroll-y
			@scrolltolower="tabReachBottom" :refresher-enabled="true" :refresher-threshold="80"
			:refresher-background="'#efefef'" :refresher-triggered="load.triggered" @refresherrefresh="downPullRefres">
			<view class="my-list">
				<view class="no-data" v-if="dataList.length == 0"><u-empty text="没有订单数据" mode="list"></u-empty></view>
				<template v-else>
					<view class="ml-item" v-for="(row, index) in dataList" :key="row.id">
						<view @click="jsy_del_btn(row)" class="i-title"
							style="display: flex;    justify-content: space-between;">
							<view style="font-size: 40rpx;color: #ff5722;">
								<view class="tip-icon"></view>{{row.moneyTypeName}}

							</view>
							<view>详情<u-icon name="arrow-right"></u-icon></view>
						</view>
						<view class="i-title-row">

							<view class="r-title">经办人信息:{{row.operName}}</view>
							<view style="font-size: 30rpx;color: red;" class="r-detail-btn">
								记账审核状态:{{row.isCheck == 'NO_CHECK'?'未审核':row.isCheck == 'CHECKED'?'已审核':row.isCheck == 'CANCELLATION'?'已报销':'未通过'}}

							</view>

						</view>
						<view class="i-title-row">

							<view class="r-title">车牌:{{row.plateNum}}</view>
							<view style="font-size: 30rpx;color: #ff9800;" class="r-detail-btn">
								支出金额:{{row.reimMoney}}
							</view>

						</view>
						<view class="content">
							{{row.remark}}
						</view>

						<view v-if='row.isCheck == "NO_CHECK"' style="display: flex;justify-content: flex-end;">

							<!-- <view  class="btn" :data-obj="{index: index, id: o.id}"
								@click="setDelQjMd">删除记录</view> -->
							<!-- gotoQjDetail gotoQjAdup -->
							<view
								style="margin-right: 20rpx;       background-color: #ff9800;color: #FFFFFF !important; width: 150rpx; text-align: center;font-weight: 700; border-radius: 12rpx;"
								class="btn ok" :data-obj="row.id" @click="recognition_Btn2(row)">审核不通过</view>

							<view
								style="       background-color: #00C3CE;color: #FFFFFF !important; width: 130rpx; text-align: center;font-weight: 700; border-radius: 12rpx;"
								class="btn ok" :data-obj="row.id" @click="recognition_Btn(row)">审核通过</view>
						</view>




					</view>


					<u-loadmore :status="load.status" :load-text="load.loadText" bgColor="#f2f2f2"></u-loadmore>
				</template>


			</view>
		</scroll-view>
		<u-picker :params="params" @confirm="time_confirm" @cancel="time_cancel" v-model="time_show"
			:default-time="time_value" mode="time"></u-picker>
		<u-picker :params="params" @confirm="time_confirm2" @cancel="time_cancel2" v-model="time_show2"
			:default-time="time_value" mode="time"></u-picker>
		<u-select @confirm="reimStatus_confirm" :label-name='"label"' :value-name='"id"' v-model="reimStatus_show"
			:list="reimStatusList"></u-select>
		<u-select @confirm="operUserId_confirm" :label-name='"realName"' :value-name='"ftUserId"'
			v-model="operUserId_show" :list="operUserIdList"></u-select>
		<u-select @confirm="moneyTypeIds_confirm" :label-name='"text"' :value-name='"id"' v-model="moneyTypeIds_show"
			:list="moneyTypeIdsList"></u-select>
		<u-modal :title="delMd.title" :confirm-style="{'color': '#00c3ce'}" v-model="delMd.state"
			:show-cancel-button="true" @confirm="okDelQj">
			<view style="width: 560rpx;margin: auto;">
				<!-- <view class="c-yellow" :style="{'padding': '20rpx', 'text-align': 'center'}">{{delMd.tip}}</view> -->
				<u-input :border="true" v-model="ps.remark" :type="'textarea'" :custom-style="{'color': '#00C3CE'}"
					:placeholderStyle="'color: #f000000;'" :clearable="false" :auto-height="true" :height="150"
					:placeholder="'备注'" />
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				totalPay: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				time_show: false,
				time_show2: false,
				moneyTypeIds_name: '',
				moneyTypeIdsList: [],
				moneyTypeIds_show: false,
				operUserId_name: '',
				operUserIdList: [],
				operUserId_show: false,
				reimStatus_name: '未审核',
				reimStatusList: [{
					id: '全部',
					label: '全部',

				}, {
					id: 'NO_CHECK',
					label: '未审核',

				}, {
					id: 'CHECKED',
					label: '已审核',

				}, {
					id: 'CANCELLATION',
					label: '已报销',

				}, ],
				reimStatus_show: false,
				find: {
					page: {
						pageNum: 1,
						pageSize: 20,
					},
					deptIds: '',
					stime: '',
					etime: '',

					moneyTypeIds: [],
					operMark: '',
					operUserId: '',
					orderNum: '',
					plateNum: '',
					reimMoney: '',
					reimStatus: ['NO_CHECK'],
					reimUser: '',

					staffReimWay: '1',
					timeType: '1',
				},
				dataList: [],
				load: this.U.scopy(this.C.loadmore),
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 删除--弹框
				delMd: {
					state: false,
					title: '删除提示',
					tip: '', // 提示内容
					obj: null, // 参数对象
				},
				ps: {
					ids: [],
					isCheck: '',
					remark: '',
				},
			}
		},
		onReady() {
			let currentDate = new Date();

			let year = currentDate.getFullYear();
			let month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，然后补0
			let day = String(currentDate.getDate()).padStart(2, '0');
			let hours = String(currentDate.getHours()).padStart(2, '0');
			let minutes = String(currentDate.getMinutes()).padStart(2, '0');
			let seconds = String(currentDate.getSeconds()).padStart(2, '0');

			let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;


		},
		onLoad(e) {
			const that = this;

			// 其他页面跳转回当前页刷新列表
			uni.$on('refQjList', (i) => {
				that.$nextTick(function() {
					that.queryList()
				});
			});
			that.queryList()
		},
		// 在 App.vue 中设置页面切换监听
		onShow() {

		},
		mounted() {
			let that = this
			that.$u.api.findStaffCombo({
				staffStates: 'NORMAL,TRY'
			}).then(res => {
				that.operUserIdList = res.data || [];
				let data = {
					realName: '全部',
					ftUserId: '全部'
				}
				that.operUserIdList.unshift(data)

			})
			that.$u.api.getDriverMoneyTypes({}).then(res => {
				that.moneyTypeIdsList = res.data || [];
				let data = {
					text: '全部',
					id: '全部'
				}
				that.moneyTypeIdsList.unshift(data)
			})
		},
		methods: {
			recognition_Btn2(e) {
				let that = this,
					U = that.U;
				that.ps.ids = [e.id]
				that.ps.isCheck = 'REFUSED'
				that.ps.remark = ''

				that.delMd = {
					state: true,
					title: '审核',
					tip: '确定审核不通过吗？',
					obj: ''
				};
			},
			recognition_Btn(e) {
				let that = this,
					U = that.U;
				that.ps.ids = [e.id]
				that.ps.isCheck = 'CHECKED'
				that.ps.remark = ''
				that.delMd = {
					state: true,
					title: '审核',
					tip: '确定审核通过吗？',
					obj: ''
				};
			},
			// 确认删除-
			okDelQj() {
				let that = this,
					U = that.U,
					id = that.delMd.obj;

				that.$u.api.checkStaffReimburse(that.ps).then(res => {
					if (res.code == 1) {
						U.qsuccess(res.msg, 3000, function() {
							// 隐藏弹框
							that.delMd.state = false;

							that.queryList()
						});
					} else {
						U.qerror(res.msg);
					}
				});
			},
			reimUser_btn() {
				this.queryList()
			},
			jsy_del_btn(e) {
				uni.setStorageSync('jsydata', e);
				uni.navigateTo({
					url: '/my-man/jsy_list/jsy_deil'
				});
			},
			moneyTypeIds_btn() {
				this.moneyTypeIds_show = true
			},
			moneyTypeIds_confirm(e) {
				if (e[0].value == '全部') {
					this.find.moneyTypeIds = []
					this.moneyTypeIds_name = ''
				} else {
					this.find.moneyTypeIds = [e[0].value]
					this.moneyTypeIds_name = e[0].label
				}




				this.queryList()
				this.moneyTypeIds_show = false

			},
			operUserId_btn() {
				this.operUserId_show = true
			},
			operUserId_confirm(e) {
				if (e[0].value == '全部') {
					this.find.operUserId = ''
					this.operUserId_name = ''
				} else {
					this.find.operUserId = e[0].value
					this.operUserId_name = e[0].label
				}




				this.queryList()
				this.operUserId_show = false

			},
			reimStatus_btn() {
				this.reimStatus_show = true
			},
			time_btn() {
				this.time_show = true
			},
			reimStatus_confirm(e) {
				console.log(e)
				if (e[0].value == 'NO_CHECK') {
					this.find.reimStatus = ['NO_CHECK']
					this.reimStatus_name = '未审核'
				} else if (e[0].value == 'CHECKED') {
					this.find.reimStatus = ['CHECKED']
					this.reimStatus_name = '已审核'
				} else if (e[0].value == 'CANCELLATION') {
					this.find.reimStatus = ['CANCELLATION']
					this.reimStatus_name = '已报销'
				} else if (e[0].value == '全部') {
					this.find.reimStatus = []
					this.reimStatus_name = ''
				}
				this.queryList()
				this.reimStatus_show = false

			},
			time_confirm(e) {

				this.find.stime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_value = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_show = false
				this.queryList()
			},
			time_cancel() {
				this.time_show = false
			},
			time_btn2() {
				this.time_show2 = true
			},
			time_confirm2(e) {

				this.find.etime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_value = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_show2 = false
				this.queryList()
			},
			time_cancel2() {
				this.time_show2 = false
			},
			// 查询数据
			queryList(page) {
				let that = this

				// 存在，则表示刷新
				if (!page) {
					// 开始刷新
					that.load.triggered = true;
					console.log(that.find.page.pageNum)
					that.find.page.pageNum = 1;
					console.log(that.find.page.pageNum)
				}
				let params = that.find
				that.$u.api.findStaffReimList(params).then(res => {
					that.totalPay = res.data.totalPay
					// 第一页的时候，停止刷新
					if (!page) {
						// 停止刷新
						that.load.triggered = false;
						// 刷新则清空列表
						that.dataList = [];
					}
					if (res.code == 1) {
						if (res.data.list.total > res.data.list.list.length) {
							let dataList = res.data.list.list

							that.count = res.data.list.total
							that.totalPay = res.data.totalPay
							// 追加数据
							if (that.dataList.length < that.count) {
								that.dataList = that.dataList.concat(dataList);
							} else {

							}


							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						} else {
							let dataList = res.data.list.list

							// 追加数据
							that.dataList = dataList
							that.count = res.data.list.total
							// 设置加载状态
							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						}

					}
				});
			},

			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				let that = this
				// 解决view层不同步的问题

				that.scrollTop = that.old.scrollTop

				that.$nextTick(function() {
					that.scrollTop = 0

				});


			}, // 设置-底部上滑加载数据时状态显示
			tabReachBottom() {
				let that = this;

				// 数据已经加载完
				if (that.dataList.length == that.dataList.total) {
					// 设置加载状态为：没有更多了
					that.load.status = 'nomore';
				} else {
					// 设置加载状态为：加载中...
					that.load.status = 'loading';
					// 增加一页页码
					that.find.page.pageNum++;
					that.queryList(1);
				}
			},
			// 下拉刷新
			downPullRefres() {
				// 重新查询

				this.queryList();
			},

		},



	}
</script>

<style lang="less">
	.lt-btns {
		display: flex !important;
	}

	.qj-list {
		min-height: 100vh;
		padding-top: 2rpx;
	}

	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;

	}
</style>